<template>
    <div class="index-box">
        <div class="book-item">
            <div class="question-system">
                <div class="search-area">
                    <div class="search-row">
                        <div class="search-item">
                            <el-input v-model="searchParams.question" placeholder="请输入教材名称"></el-input>
                        </div>
                        <div class="search-item">
                            <el-select v-model="searchParams.type" placeholder="请选择类型" style="width: 100%">
                                <el-option label="单选题" value="single"></el-option>
                                <el-option label="多选题" value="multiple"></el-option>
                                <el-option label="判断题" value="judge"></el-option>
                                <el-option label="填空题" value="fill"></el-option>
                            </el-select>
                        </div>
                        <div class="search-item">
                            <el-input v-model="searchParams.question" placeholder="请输入ISBN码"></el-input>
                        </div>
                        <div class="search-item">
                            <el-select v-model="searchParams.difficulty" placeholder="请选择公开权限" style="width: 100%">
                                <el-option label="简单" value="easy"></el-option>
                                <el-option label="中等" value="medium"></el-option>
                                <el-option label="困难" value="hard"></el-option>
                            </el-select>
                        </div>
                        <div class="search-actions">
                            <el-button>
                                <el-icon><Search /></el-icon>查询
                            </el-button>
                            <el-button @click="uploadBook()">
                                <el-icon><Upload /></el-icon>上传书籍
                            </el-button>
                        </div>
                    </div>
                </div>
                <div class="table-area">
                    <el-table ref="multipleTableRef" :data="questions" style="width: 100%" @selection-change="handleSelectionChange" >
                        <el-table-column prop="content" label="教材名称" align="center">
                            <template #default="scope">
                                <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top-start" > <div class="text">{{ scope.row.title }}</div> </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="教材/图书类型" align="center" />
                        <el-table-column prop="isbn" label="ISBN码" align="center" />
                        <el-table-column prop="permission" label="公开权限" align="center" />
                        <el-table-column prop="knowledge" label="知识点数" align="center" />
                        <el-table-column prop="relationship" label="关系数" align="center" />
                        <el-table-column prop="status" label="状态" align="center" />
                        <el-table-column property="name" label="操作" align="center">
                            <template #default="scope">
                                <div class="material-operations">
                                    <el-link type="primary" @click="previewMaterial(scope.row)" underline="false">书籍图谱</el-link>
                                    <el-link type="primary" @click="quoteBook(scope.row)" underline="false">引用</el-link>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pages">
                        <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="quoteDialogVisible" title="Tips" width="40%">
            <template #header>
                <div class="my-header">
                    <span>教材/图书引用</span>
                </div>
            </template>
            <div class="quote-box">
                <div class="notification-container">
                    <div class="notification-icon">
                        <el-icon color="#FA8C2A"><WarningFilled /></el-icon>
                        <span>正在将《标准日本语（初级下册）》公开标准教材引用到课程</span>
                    </div>
                </div>
                <div class="quote-item selects">
                    <el-select v-model="bookValue" class="m-2" placeholder="请选择课程">
                        <el-option v-for="item in questions" :key="item.title" :label="item.title" :value="item.title" />
                    </el-select>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="quoteBook()">取消</el-button>
                    <el-button type="primary" @click="quoteBook()">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="uploadDialogVisible" title="Tips" width="40%">
            <template #header>
                <div class="my-header">
                    <span>上传教材</span>
                </div>
            </template>
            <div class="quote-box">
                <div class="notification-container">
                    <div class="notification-icon">
                        <el-icon color="#FA8C2A"><WarningFilled /></el-icon>
                        <span>本地选取电子版教材/图书进行上传，并自动生成教材/图书知识图谱。</span>
                        <span>支持格式：pdf,docx,txt,doc</span>
                    </div>
                </div>
                <div class="quote-item">
                    <el-input v-model="isbn" placeholder="请输入ISBN码" />
                    <el-input v-model="bookname" placeholder="请输入教材名称" />
                    <div class="quote-uploads">
                        <el-input v-model="fileName" disabled />
                        <el-upload ref="uploadRef" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :auto-upload="false" :on-change="handleFileChange" :show-file-list="false" :multiple="false">
                            <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                            </template>
                        </el-upload>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="uploadBook()">取消</el-button>
                    <el-button type="primary" @click="uploadBook()">上传并生成图谱</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import { Upload,Search,WarningFilled } from '@element-plus/icons-vue'
    const searchParams = ref({ question: '', id: '', type: '', difficulty: '', status: '' });
    const questions = ref([
        {
            title: '标准日语（初级下册）',
            type: '公开标准教材',
            isbn: '9787107185069',
            permission: '完全公开',
            knowledge: '369',
            relationship: '269',
            status: '生成完成',
        },
        {
            title: '标准日语（初级上册）',
            type: '公开标准教材',
            isbn: '7107108654',
            permission: '完全公开',
            knowledge: '263',
            relationship: '184',
            status: '生成完成',
        },
        {
            title: '信号与系统',
            type: '公开标准教材',
            isbn: '9787111759775',
            permission: '完全公开',
            knowledge: '95',
            relationship: '78',
            status: '生成中',
        },
        {
            title: 'Java程序语言设计课程标准',
            type: '公开标准教材',
            isbn: '7843954512',
            permission: '完全公开',
            knowledge: '168',
            relationship: '175',
            status: '生成中',
        },
        {
            title: '模拟电路与数字电路',
            type: '公开标准教材',
            isbn: '5675869783233',
            permission: '完全公开',
            knowledge: '1335',
            relationship: '1350',
            status: '生成完成',
        },
        {
            title: '物联网综合设计',
            type: '公开标准教材',
            isbn: '5675869783233',
            permission: '完全公开',
            knowledge: '1335',
            relationship: '1350',
            status: '生成完成',
        },
        {
            title: '传感器原理与应用',
            type: '公开标准教材',
            isbn: '1234567893',
            permission: '完全公开',
            knowledge: '94',
            relationship: '1350',
            status: '生成完成',
        },
        {
            title: '国家安全教育大学生读本',
            type: '公开标准教材',
            isbn: '1234567893',
            permission: '完全公开',
            knowledge: '94',
            relationship: '1350',
            status: '生成完成',
        },
    ]);
    const quoteDialogVisible = ref(false)
    const uploadDialogVisible = ref(false)
    const bookValue = ref('')
    const isbn = ref('')
    const bookname = ref('')
    const fileName = ref('')
    const quoteBook = () => {
        quoteDialogVisible.value  =  !quoteDialogVisible.value;
    };
    const uploadBook = () => {
        fileName.value = ""
        uploadDialogVisible.value  =  !uploadDialogVisible.value;
    };
    const handleFileChange = (file) => {
          fileName.value = file.name;
    }
</script>
<style scoped>
    :deep(.book-item .el-input__wrapper,.el-select__wrapper){background: #F2F3FA;}
    :deep(.book-item .el-table .el-table__row:nth-child(odd)) { background-color: #E9F1FC; }
    :deep(.book-item .el-table .el-table__row:nth-child(even)) { background-color: #CADFFA; }
    :deep(.quote-item .el-select,.el-inputmeigo){width: 80%;}
    :deep(.quote-item .el-input){margin-top: 20px;}
    :deep(.el-input__wrapper){height: 35px;}
    :deep(.el-select){height: 35px;}
    :deep(.el-select__wrapper){height: 35px;}
    .index-box{position: relative;}
    .book-item{border-radius: 8px;width: 100%;height: calc(85vh + 20px);background: #fff;}
    .search-row { display: flex; gap: 20px;padding: 20px 20px 0 20px;justify-content: space-between; }
    .search-item { min-width: 250px; }
    .table-area { background: white; border-radius: 4px; padding: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
    .table-area .text{ width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .material-operations{display: flex;justify-content: space-around;}
    .operation-preview{width: 50px;cursor: pointer;}
    .pages{display: flex;flex-direction: row;justify-content: end;position: absolute;bottom: 30px;right: 30px; }
    .my-header{text-align: left;}
    .quote-box{padding-bottom: 30px;}
    .notification-icon{ display: flex;flex-direction: row;justify-content: center;align-items: center;background: #FFF9ED; width: 90%;margin: 0 auto;padding: 10px;border-radius: 10px; }
    .notification-icon span{ margin-left: 5px;color: #FA8C2A; }
    .selects{margin-top: 20px;}
    .upload-demo{margin-top: 20px;}
    .quote-uploads{display: flex;flex-direction: row;width: 80%;margin: 0 auto;gap: 20px;justify-content: space-between;}
</style>